@page "/RazorTemplates"

<h1>Razor Templates</h1>

<p>Render fragments can be defined using Razor template syntax. Razor templates are a way to define a UI snippet.</p>

<pre><code>@@{
    RenderFragment template = @@&lt;p&gt;The time is @DateTime.Now.&lt;/p&gt;;
    RenderFragment&lt;Pet&gt; petTemplate = (pet) =&gt; @@&lt;p&gt;Your pet's name is @@pet.Name.&lt;/p&gt;;
}
</code></pre>

@{
    RenderFragment template = @<p>The time is @DateTime.Now.</p>;
    RenderFragment<Pet> petTemplate = (pet) => @<p>Your pet's name is @pet.Name.</p>;
}

<p>Render fragments defined using Razor templates can be passed as arguments to templated components or rendered directly. For example, the previous templates are directly rendered with the following Razor markup:</p>

<pre><code>@@template

@@petTemplate(new Pet { Name = "Rex" })</code></pre>

@template

@petTemplate(new Pet { Name = "Rex" })

@code {
    private List<Pet> pets = new List<Pet>
    {
        new Pet { PetId = 1, Name = "Rin Tin Tin" },
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 3, Name = "Fred" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 5, Name = "Lassie" },
        new Pet { PetId = 6, Name = "Spot" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}
